Solid Router: การจัดการ Client-Side Navigation ใน SolidJS ให้เชี่ยวชาญ

SolidJS ซึ่งเป็นที่รู้จักในด้านประสิทธิภาพที่ยอดเยี่ยมและความเรียบง่าย เป็นรากฐานที่ยอดเยี่ยมสำหรับการสร้างเว็บแอปพลิเคชันสมัยใหม่ ในการสร้างประสบการณ์ที่ดึงดูดใจและใช้งานง่ายอย่างแท้จริง เราเตอร์ฝั่งไคลเอ็นต์ที่แข็งแกร่งเป็นสิ่งจำเป็น ขอแนะนำ Solid Router ซึ่งเป็นเราเตอร์อย่างเป็นทางการและแนะนำสำหรับ SolidJS ที่ออกแบบมาเพื่อผสานรวมกับหลักการ reactive ของเฟรมเวิร์กได้อย่างราบรื่น

คู่มือฉบับสมบูรณ์นี้จะเจาะลึกโลกของ Solid Router ครอบคลุมทุกอย่างตั้งแต่การตั้งค่าพื้นฐานไปจนถึงเทคนิคขั้นสูงสำหรับการสร้าง single-page applications (SPAs) ที่ซับซ้อนและไดนามิก ไม่ว่าคุณจะเป็นนักพัฒนา SolidJS ที่มีประสบการณ์หรือเพิ่งเริ่มต้น บทความนี้จะมอบความรู้และทักษะที่จำเป็นเพื่อให้คุณเชี่ยวชาญในการนำทางฝั่งไคลเอ็นต์

Solid Router คืออะไร?

Solid Router คือเราเตอร์ฝั่งไคลเอ็นต์ที่มีน้ำหนักเบาและประสิทธิภาพสูง ซึ่งออกแบบมาโดยเฉพาะสำหรับ SolidJS โดยใช้ประโยชน์จาก reactivity ของ SolidJS เพื่ออัปเดต UI อย่างมีประสิทธิภาพตามการเปลี่ยนแปลงของ URL ในเบราว์เซอร์ ซึ่งแตกต่างจากเราเตอร์แบบดั้งเดิมที่อาศัย virtual DOM diffing แต่ Solid Router จะจัดการกับ DOM โดยตรง ส่งผลให้มีประสิทธิภาพที่รวดเร็วและคาดการณ์ได้มากขึ้น

คุณสมบัติหลักของ Solid Router ได้แก่:

• Declarative Routing: กำหนดเส้นทางของคุณโดยใช้ API ที่ใช้ JSX ที่เรียบง่ายและเข้าใจง่าย
• Dynamic Routing: จัดการเส้นทางที่มีพารามิเตอร์ได้อย่างง่ายดาย ช่วยให้คุณสร้างแอปพลิเคชันแบบไดนามิกและขับเคลื่อนด้วยข้อมูลได้
• Nested Routes: จัดระเบียบแอปพลิเคชันของคุณเป็นส่วนๆ อย่างมีตรรกะด้วยเส้นทางที่ซ้อนกัน
• Link Component: นำทางระหว่างเส้นทางต่างๆ ได้อย่างราบรื่นโดยใช้คอมโพเนนต์ <A> ซึ่งจะจัดการการอัปเดต URL และสไตล์ของลิงก์ที่ใช้งานอยู่โดยอัตโนมัติ
• Data Loading: โหลดข้อมูลแบบอะซิงโครนัสก่อนที่จะเรนเดอร์เส้นทาง เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ราบรื่น
• Transitions: สร้างการเปลี่ยนผ่านระหว่างเส้นทางที่สวยงามเพื่อปรับปรุงประสบการณ์ของผู้ใช้
• Error Handling: จัดการข้อผิดพลาดอย่างสวยงามและแสดงหน้าข้อผิดพลาดที่กำหนดเอง
• History API Integration: ผสานรวมกับ History API ของเบราว์เซอร์ได้อย่างราบรื่น ช่วยให้ผู้ใช้สามารถนำทางโดยใช้ปุ่มย้อนกลับและไปข้างหน้าได้

เริ่มต้นใช้งาน Solid Router

การติดตั้ง

ในการติดตั้ง Solid Router ให้ใช้ package manager ที่คุณต้องการ:

            npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router
            

              
                Copy
              
            
          

การตั้งค่าพื้นฐาน

หัวใจหลักของ Solid Router คือคอมโพเนนต์ <Router> และ <Route> คอมโพเนนต์ <Router> ทำหน้าที่เป็นรากของระบบ routing ของแอปพลิเคชันของคุณ ในขณะที่คอมโพเนนต์ <Route> กำหนดการจับคู่ระหว่าง URL และคอมโพเนนต์

นี่คือตัวอย่างพื้นฐาน:

            import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Route path="/"> <Home/> </Route>
      <Route path="/about"> <About/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

ในตัวอย่างนี้ คอมโพเนนต์ <Router> จะครอบแอปพลิเคชันทั้งหมด คอมโพเนนต์ <Route> กำหนดสองเส้นทาง: หนึ่งสำหรับ path ราก ("/") และอีกอันสำหรับ path "/about" เมื่อผู้ใช้ไปที่ path ใด path หนึ่งเหล่านี้ คอมโพเนนต์ที่เกี่ยวข้อง (Home หรือ About) จะถูกเรนเดอร์

คอมโพเนนต์ <A>

หากต้องการนำทางระหว่างเส้นทาง ให้ใช้คอมโพเนนต์ <A> ที่ Solid Router มีให้ คอมโพเนนต์นี้คล้ายกับแท็ก <a> ของ HTML ทั่วไป แต่จะจัดการการอัปเดต URL โดยอัตโนมัติและป้องกันการรีโหลดทั้งหน้า

            import { A } from '@solidjs/router';

function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
    </nav>
  );
}

export default Navigation;
            

              
                Copy
              
            
          

เมื่อผู้ใช้คลิกที่ลิงก์เหล่านี้ Solid Router จะอัปเดต URL ของเบราว์เซอร์และเรนเดอร์คอมโพเนนต์ที่เกี่ยวข้องโดยไม่ทำให้เกิดการรีโหลดทั้งหน้า

เทคนิค Routing ขั้นสูง

Dynamic Routing ด้วย Route Parameters

Solid Router รองรับ dynamic routing ซึ่งช่วยให้คุณสร้างเส้นทางที่มีพารามิเตอร์ได้ สิ่งนี้มีประโยชน์สำหรับการแสดงเนื้อหาตาม ID หรือ slug ที่เฉพาะเจาะจง

            import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Route path="/users/:id"> <UserProfile/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

ในตัวอย่างนี้ ส่วน :id ใน path คือ route parameter หากต้องการเข้าถึงค่าของพารามิเตอร์ id ภายในคอมโพเนนต์ UserProfile คุณสามารถใช้ hook useParams:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

hook useParams จะคืนค่าอ็อบเจกต์ที่มี route parameters ในกรณีนี้ params.id จะมีค่าของพารามิเตอร์ id จาก URL จากนั้นจะใช้ hook createResource เพื่อดึงข้อมูลผู้ใช้ตาม ID

ตัวอย่างสำหรับนานาชาติ: ลองจินตนาการถึงแพลตฟอร์มอีคอมเมิร์ซระดับโลก คุณสามารถใช้ dynamic routing เพื่อแสดงรายละเอียดสินค้าตาม ID ของสินค้า: /products/:productId ซึ่งช่วยให้คุณสร้าง URL ที่ไม่ซ้ำกันสำหรับแต่ละผลิตภัณฑ์ได้อย่างง่ายดาย ทำให้ผู้ใช้สามารถแชร์และบุ๊กมาร์กสินค้าที่ต้องการได้ง่ายขึ้น ไม่ว่าพวกเขาจะอยู่ที่ใดก็ตาม

Nested Routes (เส้นทางซ้อนกัน)

Nested routes ช่วยให้คุณจัดระเบียบแอปพลิเคชันของคุณเป็นส่วนๆ อย่างมีตรรกะ ซึ่งมีประโยชน์อย่างยิ่งสำหรับแอปพลิเคชันที่ซับซ้อนซึ่งมีการนำทางหลายระดับ

            import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Route path="/dashboard">
        <Dashboard/>
        <Route path="/profile"> <Profile/> </Route>
        <Route path="/settings"> <Settings/> </Route>
      </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

ในตัวอย่างนี้ คอมโพเนนต์ <Dashboard> ทำหน้าที่เป็นคอนเทนเนอร์สำหรับคอมโพเนนต์ <Profile> และ <Settings> เส้นทาง <Profile> และ <Settings> จะซ้อนอยู่ภายในเส้นทาง <Dashboard> ซึ่งหมายความว่าจะถูกเรนเดอร์เมื่อผู้ใช้อยู่ที่ path "/dashboard" เท่านั้น

ในการเรนเดอร์ nested routes ภายในคอมโพเนนต์ <Dashboard> คุณต้องใช้คอมโพเนนต์ <Outlet>:

            import { Outlet } from '@solidjs/router';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <A href="/dashboard/profile">Profile</A>
        <A href="/dashboard/settings">Settings</A>
      </nav>
      <Outlet/>
    </div>
  );
}

export default Dashboard;
            

              
                Copy
              
            
          

คอมโพเนนต์ <Outlet> ทำหน้าที่เป็นพื้นที่สำหรับเรนเดอร์ nested routes เมื่อผู้ใช้นำทางไปยัง "/dashboard/profile" คอมโพเนนต์ <Profile> จะถูกเรนเดอร์ภายในคอมโพเนนต์ <Outlet> ในทำนองเดียวกัน เมื่อผู้ใช้นำทางไปยัง "/dashboard/settings" คอมโพเนนต์ <Settings> ก็จะถูกเรนเดอร์ภายในคอมโพเนนต์ <Outlet>

การโหลดข้อมูลด้วย createResource

การโหลดข้อมูลแบบอะซิงโครนัสก่อนที่จะเรนเดอร์เส้นทางเป็นสิ่งสำคัญอย่างยิ่งในการมอบประสบการณ์ที่ราบรื่นให้กับผู้ใช้ Solid Router ผสานรวมกับ hook createResource ของ SolidJS ได้อย่างลงตัว ทำให้การโหลดข้อมูลเป็นเรื่องง่าย

เราได้เห็นตัวอย่างนี้ในคอมโพเนนต์ UserProfile ก่อนหน้านี้แล้ว แต่นี่คือตัวอย่างอีกครั้งเพื่อความชัดเจน:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

hook createResource รับอาร์กิวเมนต์สองตัว: signal ที่กระตุ้นการโหลดข้อมูลและฟังก์ชันที่ดึงข้อมูล ในกรณีนี้ signal คือ () => params.id ซึ่งหมายความว่าข้อมูลจะถูกดึงมาทุกครั้งที่พารามิเตอร์ id เปลี่ยนแปลง ฟังก์ชัน fetchUser จะดึงข้อมูลผู้ใช้จาก API ตาม ID

hook createResource จะคืนค่าเป็นอาร์เรย์ที่ประกอบด้วย resource (ข้อมูลที่ดึงมา) และฟังก์ชันสำหรับดึงข้อมูลซ้ำ resource คือ signal ที่เก็บข้อมูล คุณสามารถเข้าถึงข้อมูลได้โดยการเรียก signal (user()) หากข้อมูลยังคงโหลดอยู่ signal จะคืนค่าเป็น undefined ซึ่งช่วยให้คุณสามารถแสดงตัวบ่งชี้การโหลดในขณะที่กำลังดึงข้อมูลได้

Transitions (การเปลี่ยนผ่าน)

การเพิ่ม transitions ระหว่างเส้นทางสามารถปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก แม้ว่า Solid Router จะไม่มีการรองรับ transitions ในตัว แต่ก็สามารถทำงานร่วมกับไลบรารีอย่าง solid-transition-group ได้เป็นอย่างดี เพื่อให้ได้ transitions ที่ราบรื่นและสวยงาม

ขั้นแรก ติดตั้งแพ็คเกจ solid-transition-group:

            npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group
            

              
                Copy
              
            
          

จากนั้น ครอบเส้นทางของคุณด้วยคอมโพเนนต์ <TransitionGroup>:

            import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <TransitionGroup>
        <Route path="/">
          <Transition name="fade" duration={300}>
            <Home/>
          </Transition>
        </Route>
        <Route path="/about">
          <Transition name="fade" duration={300}>
            <About/>
          </Transition>
        </Route>
      </TransitionGroup>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

ในตัวอย่างนี้ แต่ละเส้นทางจะถูกครอบด้วยคอมโพเนนต์ <Transition> โดย prop name จะระบุคำนำหน้าคลาส CSS สำหรับ transition และ prop duration จะระบุระยะเวลาของ transition เป็นมิลลิวินาที

คุณจะต้องกำหนดคลาส CSS ที่สอดคล้องกันสำหรับ transition ใน stylesheet ของคุณ:

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
            

              
                Copy
              
            
          

โค้ด CSS นี้กำหนด transition แบบ fade-in/fade-out อย่างง่าย เมื่อเข้าสู่เส้นทาง คลาส .fade-enter และ .fade-enter-active จะถูกนำไปใช้ ทำให้คอมโพเนนต์ค่อยๆ ปรากฏขึ้น เมื่อออกจากเส้นทาง คลาส .fade-exit และ .fade-exit-active จะถูกนำไปใช้ ทำให้คอมโพเนนต์ค่อยๆ หายไป

การจัดการข้อผิดพลาด

การจัดการข้อผิดพลาดอย่างเหมาะสมเป็นสิ่งสำคัญในการมอบประสบการณ์ที่ดีแก่ผู้ใช้ Solid Router ไม่มีการจัดการข้อผิดพลาดในตัว แต่คุณสามารถนำไปใช้ได้อย่างง่ายดายโดยใช้ error boundary แบบ global หรือตัวจัดการข้อผิดพลาดเฉพาะเส้นทาง

นี่คือตัวอย่างของ error boundary แบบ global:

            import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  const [error, setError] = createSignal(null);

  return (
    <ErrorBoundary fallback={<p>Something went wrong: {error()?.message}</p>}>
      <Suspense fallback={<p>Loading...</p>}>
        <Router>
          <Route path="/"> <Home/> </Route>
          <Route path="/about"> <About/> </Route>
        </Router>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

คอมโพเนนต์ <ErrorBoundary> จะดักจับข้อผิดพลาดใดๆ ที่เกิดขึ้นภายใน children ของมัน prop fallback จะระบุคอมโพเนนต์ที่จะเรนเดอร์เมื่อเกิดข้อผิดพลาด ในกรณีนี้ จะเรนเดอร์ย่อหน้าพร้อมข้อความแสดงข้อผิดพลาด

คอมโพเนนต์ <Suspense> จัดการกับ promises ที่รอดำเนินการ ซึ่งโดยทั่วไปจะใช้กับคอมโพเนนต์แบบ async หรือการโหลดข้อมูล โดยจะแสดง prop `fallback` จนกว่า promises จะเสร็จสิ้น

หากต้องการทำให้เกิดข้อผิดพลาด คุณสามารถ throw exception ภายในคอมโพเนนต์ได้:

            function Home() {
  throw new Error('Failed to load home page');

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

เมื่อโค้ดนี้ทำงาน คอมโพเนนต์ <ErrorBoundary> จะดักจับข้อผิดพลาดและเรนเดอร์คอมโพเนนต์ fallback

ข้อควรพิจารณาสำหรับนานาชาติ: เมื่อแสดงข้อความแสดงข้อผิดพลาด ควรพิจารณาถึงการทำให้เป็นสากล (i18n) ใช้ไลบรารีการแปลเพื่อให้ข้อความแสดงข้อผิดพลาดเป็นภาษาที่ผู้ใช้ต้องการ ตัวอย่างเช่น หากผู้ใช้ในญี่ปุ่นพบข้อผิดพลาด พวกเขาควรเห็นข้อความแสดงข้อผิดพลาดเป็นภาษาญี่ปุ่น ไม่ใช่ภาษาอังกฤษ

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ Solid Router

• จัดระเบียบเส้นทางของคุณ: ใช้ nested routes เพื่อจัดระเบียบแอปพลิเคชันของคุณเป็นส่วนๆ อย่างมีตรรกะ ซึ่งจะทำให้ดูแลรักษาและสำรวจโค้ดของคุณได้ง่ายขึ้น
• ใช้ route parameters สำหรับเนื้อหาแบบไดนามิก: ใช้ route parameters เพื่อสร้าง URL แบบไดนามิกสำหรับแสดงเนื้อหาตาม ID หรือ slug ที่เฉพาะเจาะจง
• โหลดข้อมูลแบบอะซิงโครนัส: โหลดข้อมูลแบบอะซิงโครนัสก่อนที่จะเรนเดอร์เส้นทางเพื่อมอบประสบการณ์ที่ราบรื่นแก่ผู้ใช้
• เพิ่ม transitions ระหว่างเส้นทาง: ใช้ transitions เพื่อปรับปรุงประสบการณ์ของผู้ใช้และทำให้แอปพลิเคชันของคุณดูสวยงามยิ่งขึ้น
• จัดการข้อผิดพลาดอย่างเหมาะสม: ใช้การจัดการข้อผิดพลาดเพื่อดักจับและแสดงข้อผิดพลาดในรูปแบบที่เป็นมิตรต่อผู้ใช้
• ใช้ชื่อเส้นทางที่สื่อความหมาย: เลือกชื่อเส้นทางที่สะท้อนเนื้อหาของเส้นทางอย่างถูกต้อง ซึ่งจะทำให้เข้าใจโครงสร้างของแอปพลิเคชันของคุณได้ง่ายขึ้น
• ทดสอบเส้นทางของคุณ: เขียน unit tests เพื่อให้แน่ใจว่าเส้นทางของคุณทำงานได้อย่างถูกต้อง ซึ่งจะช่วยให้คุณตรวจพบข้อผิดพลาดได้ตั้งแต่เนิ่นๆ และป้องกันการถดถอยของโปรแกรม

สรุป

Solid Router เป็นเราเตอร์ฝั่งไคลเอ็นต์ที่ทรงพลังและยืดหยุ่นซึ่งผสานรวมกับ SolidJS ได้อย่างราบรื่น ด้วยการเรียนรู้คุณสมบัติต่างๆ และปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด คุณจะสามารถสร้าง single-page applications ที่ซับซ้อนและไดนามิกซึ่งมอบประสบการณ์ที่ราบรื่นและน่าดึงดูดใจให้กับผู้ใช้ได้ ตั้งแต่การตั้งค่าพื้นฐานไปจนถึงเทคนิคขั้นสูง เช่น dynamic routing, การโหลดข้อมูล และ transitions คู่มือนี้ได้มอบความรู้และทักษะให้คุณเพื่อสำรวจโลกของการนำทางฝั่งไคลเอ็นต์ใน SolidJS ได้อย่างมั่นใจ เปิดรับพลังของ Solid Router และปลดล็อกศักยภาพสูงสุดของแอปพลิเคชัน SolidJS ของคุณ!

อย่าลืมศึกษาเอกสารประกอบอย่างเป็นทางการของ Solid Router สำหรับข้อมูลและตัวอย่างล่าสุด: [ลิงก์เอกสาร Solid Router - ข้อความตัวยึดตำแหน่ง]

สร้างสรรค์สิ่งที่น่าทึ่งต่อไปด้วย SolidJS!